.container {
	padding: 84rpx 36rpx;
	overflow-x: hidden;
	overflow-y: auto;
}

.article {
	width: 100%;
	&-title {
		width: 100%;
		height: 72rpx;
		color: #fffefe;
		font-family: 'PINGFANG-HEAVY';
		font-size: 52rpx;
		font-style: normal;
		font-weight: 600;
		line-height: 72rpx;
		padding-left: 62rpx;
	}
	&-area {
		margin-top: 12rpx;
		width: 100%;
		height: 360rpx;
		border-radius: 20.93rpx;
		// background: #B8CEF6;
		// padding: 20rpx;
		transform-origin: center;
		// &-title{
		// 	color: #535252;
		// 	font-family: "PINGFANG-HEAVY";
		// 	font-size: 34rpx;
		// 	font-style: normal;
		// 	font-weight: 600;
		// 	line-height: 48rpx;
		// 	margin-bottom: 10rpx;
		// }
		// &-info{
		// 	height: calc(100% - 48rpx);
		// 	color: #3c3e3f;
		// 	font-family: "PINGFANG-MEDIUM";
		// 	font-size: 24rpx;
		// 	font-style: normal;
		// 	font-weight: 400;
		// 	line-height: 36rpx;
		// 	word-break: break-all;
		// 	overflow: hidden;
		// 	display: -webkit-box;
		// 	-webkit-line-clamp: 7;
		// 	-webkit-box-orient: vertical;
		// 	text-overflow: ellipsis;
		// }
	}
}

.porfolio {
	width: 100%;
	height: 100%;
	position: sticky;
	top: 0;
}

.swiper {
	margin-top: 20rpx;
	width: 100%;
	height: 60rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;

	&-item {
		height: 100%;
		flex: 1;
		color: #797979;
		text-align: center;
		font-family: 'PINGFANG-HEAVY';
		font-size: 28rpx;
		font-weight: bolder;
		line-height: 42rpx;
		border-bottom: 2px solid #797979;
		transition: all 0.25s;
		&.active {
			color: #ffffff;
			border-bottom: 2px solid #b8cef6;
		}
	}
}

.porfolio-list {
	width: 100%;
	padding: 20rpx 0;
	overflow: auto;
	height: 100vh;
	padding-bottom: 400rpx;
}

.porfolio-card {
	width: 100%;
	height: 225rpx;
	border-radius: 20rpx;
	background: #3d3939;
	box-shadow: 0 7rpx 7rpx 0 rgba(0, 0, 0, 0.25);
	display: flex;
	align-items: center;
	& + .porfolio-card {
		margin-top: 18rpx;
	}

	&:nth-of-type(odd) {
		.porfolio-card-video {
			// background-color: #ffffff;
			&::after {
				border-color: transparent transparent transparent #ec5f5f;
			}
		}
	}
	&:nth-of-type(even) {
		.porfolio-card-video {
			// background: conic-gradient(from 180deg at 50% 50%, rgba(236, 95, 95, 0) 0deg, rgba(236, 95, 95, 1) 45deg, rgba(236, 95, 95, 0) 360deg);
			&::after {
				border-color: transparent transparent transparent #ffffff;
			}
		}
	}
	&-info {
		width: 100%;
		height: 100%;
		padding: 14rpx;
		&-person {
			display: flex;
			align-items: center;
			gap: 10rpx;
			image {
				width: 70rpx;
				height: 70rpx;
			}
			text {
				color: #b2b0b0;
				font-family: 'PINGFANG-BOLD';
				font-size: 24rpx;
				font-weight: 800;
				line-height: 36rpx;
			}
		}
		&-text {
			margin-top: 20rpx;
			color: #ffffff;
			font-family: 'PINGFANG-BOLD';
			font-size: 26rpx;
			font-weight: 600;
			line-height: 38rpx;
		}
	}
	&-video {
		flex: none;
		width: 225rpx;
		height: 225rpx;
		border-radius: 20rpx;
		position: relative;
		background-size: 100% 100%;
		background-repeat: no-repeat;
		&::after {
			content: '';
			width: 0;
			height: 0;
			border-style: solid;
			border-width: 28rpx 40rpx;
			position: absolute;
			top: 0;
			bottom: 0;
			left: 0;
			right: 0;
			margin: auto;
			transform: translateX(25%);
		}
	}

	&-image {
		flex: none;
		width: 225rpx;
		height: 225rpx;
		border-radius: 20rpx;
		position: relative;
		image {
			width: 100%;
			height: 100%;
		}
	}
}
